/* styles.css */  
.wheel-container {  
    position: relative;  
    width: 300px;  
    height: 300px;  
    margin: 50px auto;  
}  
  
.wheel {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    display: grid;  
    grid-template-columns: repeat(3, 1fr);  
    gap: 10px;  
    transition: transform 3s ease-out;  
    /* 初始旋转角度，确保转盘不是从正上方开始 */  
    transform: rotate(30deg);  
}  
  
.prize {  
    width: 100px;  
    height: 100px;  
    line-height: 100px;  
    text-align: center;  
    background-color: #f0f0f0;  
    border-radius: 10px;  
    cursor: pointer;  
}  
  
/* 隐藏中奖结果，直到转盘停止 */  
.prize.active {  
    background-color: #ff9900;  
    color: white;  
}  
  
#spinBtn {  
    display: block;  
    margin: 20px auto;  
    padding: 10px 20px;  
    cursor: pointer;  
}  
  
#result {  
    text-align: center;  
    margin-top: 20px;  
    font-size: 20px;  
}  
  
/* 可以添加一些旋转动画的keyframes */  
@keyframes spin {  
    from { transform: rotate(0deg); }  
    to { transform: rotate(3600deg); }  
}